<template>
  <div class="container">
    <el-upload class="upload-demo myUpload addVideo-demo"
               drag
               multiple
               ref="upload"
               :action="upload_option"
               :on-success="handleImageSuccess"
               :before-upload="beforeImageUpload"
               list-type="picture"
               :on-exceed="goBeyond"
               :limit="4"
               :show-file-list="false">
       <i class="el-icon-picture uploaderIcon"></i>
      <div class="el-upload__text">将图片拖拽到这里上传，或
        <em>点击上传</em>
      </div>
    </el-upload>
    <div class="img-list">
      <div class="img-content"
           v-for="(image, index) in listImgUrl">
        <img :src="url_prefix + image.path">
        <div class="name">
          <el-input v-model="image.name"
                    placeholder="请输入名称"
                    @blur="submitname"></el-input>
        </div>
        <div class="describe">
          <el-input v-model="image.owner"
                    placeholder="请输入描述"
                    @blur="submitname"></el-input>
        </div>
        <!-- 删除icon -->
        <div class="del">
          <i @click="handleFileRemove(image,key)"
             class="el-icon-delete"></i>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px;">
      <el-button type="primary"
                 size="small"
                 @click="uoloadPic">确定</el-button>
    </div>
    <el-dialog title=""
               :visible.sync="isEnlargeImage"
               size="large"
               :modal-append-to-body="false"
               top="8%"
               width="60%">
      <img @click="isEnlargeImage = false"
           style="width:100%;"
           :src="enlargeImage">
    </el-dialog>
  </div>
</template>
<script>
import store from '@/store'
// const upload_option = {
//   upload_url:
//     process.env.BASE_API +
//     process.env.PREFIX +
//     "/zcm/file/materialGalleryFile?userid=" +
//     store.getters.userid
// };
const defaultdraftGallery = {
  addTime: '',
  addUser: '',
  filesize: '',
  id: '',
  name: '',
  order: '',
  originalname: null,
  page: '',
  path: '',
  rows: '',
  sort: '',
  sortOrder: ''
}

const removeImgList = {
  id: ''
}
// const listImgUrl = {
//   fileUrl: ""
// }
export default {
  name: 'PhotoAlbumMy',
  props:{
    closeData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      draftGallery: Object.assign({}, defaultdraftGallery),
      upload_option:
        process.env.BASE_API +
        process.env.PREFIX +
        '/zcm/file/materialGalleryFile?userid=' +
        store.getters.userid,
      enlargeImage: '',
      isEnlargeImage: false,
      url_prefix: process.env.BASE_API + '/',
      listImgUrl: [],
      imgName: '',
      key: '',
      userId: store.getters.userid,
      removeId: Object.assign({}, removeImgList)
    }
  },
  destroyed() {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    if(this.closeData) {
    }
  },
  methods: {
    uoloadPic() {
      // 保存图片名称-作者
      console.log(this.listImgUrl)
      this.$store
        .dispatch('TpglUpdatePicture', this.listImgUrl)
        .then(res => {
          console.log(res)
        })
        .catch(() => {
          this.loading = false
        })

      // 子组件给父组件传值
      this.$emit('successList', false)
      this.listImgUrl = []
      this.$refs.upload.clearFiles() // 清空已上传的文件列表
    },
    goBeyond() {
      this.$message.error('超出上传个数')
    },
    draftForm() { },
    submitname() { },
    submittags() { },
    handleImageSuccess(res, file, fileList) {
      const listUrl = {
        addTime: '',
        addUser: '',
        filesize: '',
        id: res.data.fileid,
        name: file.name,
        order: '',
        originalname: null,
        page: '',
        path: res.data.fileurl,
        rows: '',
        sort: '',
        sortOrder: ''
      }
      this.listImgUrl.push(listUrl)
    },
    beforeImageUpload(file) {
      this.draftGallery = {}
      const isLt2M = file.size / 1024 / 1024 < 2
      if (file.name === this.imgName) {
        this.$message.error('上传图片重复')
        return false
      }

      this.imgName = file.name

      if (!isLt2M) {
        this.$message.error('上传图片不能超过 2MB!')
      }
      return isLt2M
    },
    handleFileRemove(file, i) {
      console.log(file)
      // 删除图片
      if (!file.path) {
        return false
      }
      const that = this
      this.$confirm('是否删除此图片？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 可添加ajax
          this.removeId.id = file.id
          this.$store
            .dispatch('TpglDeletePicture', this.removeId)
            .then(res => {
              // 删除图片
            })
            .catch(() => {
              this.loading = false
            })

          this.$message({
            type: 'success',
            message: '删除成功',
            onClose: () => {
              that.listImgUrl.splice(i, 1)
            }
          })
        })
        .catch(meg => console.log(meg))
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100%;
}
/*图集CSS开始*/
.upload-demo.myUpload {
  float: left;
  width: 100%;
  height: 190px;
  padding: 5px;
  margin: 5px 20px 20px 0;
}
.describe {
  margin-top: 10px;
}
.describe textarea {
  font-size: inherit;
  color: #606266;
}

.img-list {
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
}
.img-list .img-content {
  position: relative;
  display: inline-block;
  width: 23%;
  height: 260px;
  padding: 5px;
  /* margin: 5px 20px 20px 0; */
  margin-left: 20px;
  border: 1px solid #d1dbe5;
  border-radius: 4px;
  transition: all 0.3s;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.img-list .img-content:first-child {
  margin-left: 0;
}
.img-list .img-content img {
  display: block;
  width: 100%;
  height: 113px;
  margin: 0 auto;
  border-radius: 4px;
}
.img-list .img-content .name {
  margin-top: 10px;
}

.img-list .img-content:hover .del,
.img-list .img-content:hover .layer {
  opacity: 1;
}
.img-list .img-content .del,
.img-list .img-content .layer {
  opacity: 0;
  transition: all 0.3s;
}
.img-list .img-content .del {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #8492a6;
  cursor: pointer;
  font-size: 1.1em;
}
.img-list .img-content .layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
  color: #fff;
  text-align: center;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.4);
}
.img-list .img-content .layer i {
  font-size: 1.6em;
  margin-top: 80px;
}
/*图集CSS结束*/
</style>
